<template>
  <teleport to="#modal">
    <transition name="bounce">
      <div class="modalContainer" v-if="visible">
        <div class="modalInner">
          <div class="title">
            {{ title }}
          </div>
          <div class="containerBody">
            <slot></slot>
          </div>
          <div class="modalFooter">
            <div class="inner">
              <Button @click="onConfirm"> 确定 </Button>
              <Button @click="onCancel"> 取消 </Button>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import useDOMCreate from "@/hooks/useDOMCreate";
export default defineComponent({
  name: "Modal",
  props: {
    title: String,
    visible: {
      type: Boolean,
      default: false,
    },
  },
   emits: {
    'modal-on-confirm': null,
    'modal-on-cancel': null,
  },
  setup(props, ctx) {
    useDOMCreate("modal");
    const onConfirm = () => {
      ctx.emit("modal-on-confirm");
    };
    const onCancel = () => {
      ctx.emit("modal-on-cancel");
    };
    return {
      onConfirm,
      onCancel,
    };
  },
});
</script>

<style lang="scss">
@import "~@/styles/mixin.scss";
@include bounce-effect;
.modalContainer {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  background: {
    color: rgba($color: #000000, $alpha: 0.3);
    image: inherit;
  }
  .modalInner {
    min-width: 400px;
    max-width: 1200px;
    border-radius: 10px;
    position: relative;
    @include glassStyle(400px, .9);
    .title {
      padding: 10px 20px;
    }
    .containerBody {
      padding: 20px;
      padding-bottom: 80px;
    }
    .modalFooter {
        position: absolute;
        bottom: 20px;
        width: 100%;
        margin-top: 20px;
        .inner{
            margin: 0 auto;
            display: flex;
            width: 180px;
            justify-content: space-between;
        }
    }
  }
}
</style>